<template>
	<view class="chat-pages-detail" :style="{background:pageColor}">
		<view class="top-box fill-base">
			<!-- #ifdef H5 -->
			<view @tap="toPrePage" class="flex-y-center flex-1 f-caption c-title">
				<i class="iconfont icon-left mr-sm" style="font-size: 24rpx;"></i>
				<view class="f-desc" style="color: #222;">关注公众号，及时获取回复</view>
			</view>
			<!-- #endif -->
			<!-- #ifndef H5 -->
			<view class="flex-1 f-desc" style="color: #222;">关注公众号，及时获取回复</view>
			<!-- #endif -->
		</view>
		<view class="fix" style="width:100%;height:100vh" v-if="isScroll">
			<load-more :noMore="false" :loading="true"> </load-more>
		</view>
		<abnor :isCenter="true" :tip="[{text: list.del_message ? '聊天记录已清除':'没有相关数据哦~'}]"
			v-if="!loading&&list.data.length<=0&&list.current_page==1"></abnor>
		<!-- upper-threshold="93" -->
		<scroll-view @touchmove.stop.prevent scroll-y :scroll-top="scrollTop" :scroll-with-animation="animation"
			@scrolltoupper="handerUpper" upper-threshold="100" @scroll="longpress" class="center-box"
			:style="{zIndex:isScroll?-1:2}">
			<view @tap.stop="longpress" id="container">
				<view class="space-lg"></view>
				<load-more :noMore="false" :loading="loading"> </load-more>
				<view class="message-box" v-for="(item,index) in list.data" :key="index">
					<view class="flex-center pb-lg f-paragraph c-caption" :class="[{'pt-lg':index!=0}]"
						v-if="((item.is_host && item.status == 1) || (!item.is_host && item.status != 2) || item.status == 2) && (index==0 || (index>0 && item.create_time_text && item.create_time_text!==list.data[index-1].create_time_text))">
						{{item.create_time_text}}
					</view>
					<view class="flex-center pb-lg f-paragraph c-caption" v-if="item.status==2">
						{{item.is_host?`你`:`"${list.receive_info&&list.receive_info.user_name?list.receive_info.user_name:'对方'}" `}}撤回了一条消息
					</view>
					<view class="list-item flex-warp pl-lg pr-lg"
						:class="[{'left':!item.is_host},{'right':item.is_host}]"
						v-if="(item.is_host && item.status == 1) || (!item.is_host && item.status != 2)">
						<image mode="aspectFill" class="avatar-img radius"
							:src="list.receive_info&&list.receive_info.user_img?list.receive_info.user_img:`https://api.huixuananmm.com/admin/farm/default-user.png`"
							v-if="!item.is_host">
						</image>
						<view class="flex-1" :class="[{'ml-md':!item.is_host},{'mr-md':item.is_host}]">
							<view class="username f-icontext c-title text-bold ellipsis"
								:class="[{'text-right':item.is_host}]">
								{{list[['receive_info','user_info'][item.is_host]]&&list[['receive_info','user_info'][item.is_host]].user_name ? list[['receive_info','user_info'][item.is_host]].user_name : '-'}}
							</view>
							<view class="flex-between" :class="[`item-chat-${item.id}`]">
								<!-- 对方阅读消息状态 -->
								<view class="flex-1 pr-lg f-caption text-right" style="min-width: 80rpx;"
									:style="{color:!item.read?primaryColor:''}" v-if="item.is_host">
									{{!item.read?"未读":"已读"}}
								</view>
								<view @longpress="longpress(index,`item-chat-${item.id}`)" class="item-text f-paragraph"
									:style="{background:item.is_host?primaryColor:'#fff'}" v-if="item.text_type==1">
									<text decode="emsp" style="word-break:break-all;">{{item.text}}</text>
								</view>
								<image @longpress="longpress(index,`item-chat-${item.id}`)"
									@tap.top="previewImage(item.text,[item.text])" mode="widthFix"
									class="item-image radius-16" :src="item.text" v-if="item.text_type==2">
								</image>
								<video @longpress="longpress(index,`item-chat-${item.id}`)" @play="play(index)"
									@ended="ended" @fullscreenchange="fullscreenchange" :id="`video_${item.id}`"
									object-fit="contain" controls :loop="false" :src="item.text"
									class="item-video radius-16" v-if="item.text_type==3"></video>
								<view v-if="!item.is_host"></view>
							</view>
						</view>
						<image mode="aspectFill" class="avatar-img radius"
							:src="list.user_info&&list.user_info.user_img?list.user_info.user_img:`https://api.huixuananmm.com/admin/farm/default-user.png`"
							v-if="item.is_host">
						</image>
					</view>
				</view>
			</view>
		</scroll-view>

		<view @touchmove.stop.prevent class="footer-box" v-if="isLoad">
			<block v-if="canSend">
				<block v-if="showOper">
					<view class="chat-info flex-between">
						<textarea v-model="text" class="textarea fill-base f-paragraph c-title flex-1"
							:style="{padding:isIos ? i_css : a_css}" :auto-height="true" :auto-focus="false"
							:show-confirm-bar="false" cursor-spacing="20" :adjust-position="true"
							@focus="focus"></textarea>
						<view class="flex-y-center pl-lg pr-lg">
							<view @tap.stop="toSendMessage(1)"
								class="send-btn flex-center f-desc text-bold c-base radius-10"
								:style="{background:primaryColor}" v-if="isSend">
								发送</view>
							<i @tap.stop="toShowOper" class="iconfont iconjianpan" v-else></i>
						</view>
					</view>
					<view class="oper-info fill-base flex-y-center">
						<view @tap.stop="toCheckChooseImg('picture')" class="oper-item flex-center flex-column">
							<view class="icons flex-center">
								<i class="iconfont iconxiangce"></i>
							</view>
							<view class="f-icontext">图片</view>
						</view>
						<view @tap.stop="toCheckChooseImg('video')" class="oper-item flex-center flex-column">
							<view class="icons flex-center">
								<i class="iconfont iconshipin3"></i>
							</view>
							<view class="f-icontext">视频</view>
						</view>
					</view>
				</block>
				<block v-if="!showOper">
					<view class="chat-info flex-between">
						<textarea v-model="text" class="textarea fill-base f-paragraph c-title flex-1"
							:style="{padding:isIos ? i_css : a_css}" :auto-height="true" :auto-focus="true"
							:show-confirm-bar="false" cursor-spacing="20" :adjust-position="true" @focus="focus"
							v-if="isHaveShow"></textarea>
						<textarea v-model="text" class="textarea fill-base f-paragraph c-title flex-1"
							:style="{padding:isIos ? i_css : a_css}" :auto-height="true" :auto-focus="false"
							:show-confirm-bar="false" cursor-spacing="20" :adjust-position="true" @focus="focus"
							v-if="!isHaveShow"></textarea>
						<view class="flex-y-center pl-lg pr-lg">
							<view @tap.stop="toSendMessage(1)"
								class="send-btn flex-center f-desc text-bold c-base radius-10"
								:style="{background:primaryColor}" v-if="isSend">
								发送</view>
							<i @tap.stop="toShowOper" class="iconfont icongengduo_11" v-else></i>
						</view>
					</view>
					<view class="space-safe"></view>
				</block>

			</block>
			<view class="order-tips flex-center f-paragraph c-title" v-if="!canSend">订单已结束, 不能继续发消息</view>
		</view>

		<view class="longpress-box flex-between fix"
			:style="{top: currentPoint.top > 124 ? currentPoint.top - 72 +`px` : currentPoint.bottom + 10 +'px'}"
			v-if="showPress">
			<view v-if="is_host"></view>
			<view class="longpress-list rel flex-warp pd-lg ml-md mr-md f-caption c-base radius-20"
				:class="[{'mine':is_host},{'customer':!is_host}, {'top':currentPoint.top > 124}, {'bottom':currentPoint.top < 125}]">
				<view @tap.stop="toCopy" class="item-child flex-center flex-column" v-if="showCopy">
					<i class="iconfont iconfuzhi"></i>
					<view class="mt-sm">复制</view>
				</view>
				<view @tap.stop="toUpdateMsgStatus(cur_ind,-1)" class="item-child flex-center flex-column">
					<i class="iconfont icon-del"></i>
					<view class="mt-sm">删除</view>
				</view>
				<view @tap.stop="toUpdateMsgStatus(cur_ind,2)" class="item-child flex-center flex-column"
					v-if="showCancel">
					<i class="iconfont iconfenxiang1"></i>
					<view class="mt-sm">撤回</view>
				</view>
			</view>
			<view v-if="!is_host"></view>
		</view>

		<w-compress ref='wCompress' />
		<!-- #ifdef MP-WEIXIN -->
		<user-privacy ref="user_privacy" :show="false"></user-privacy>
		<!-- #endif -->
		<!-- #ifdef APP-PLUS -->
		<longbingbing-upload ref="app_upload_item" :type="sourceType" @confirm="chooseImage"></longbingbing-upload>
		<longbingbing-preview-image ref="preview_image_item"></longbingbing-preview-image>
		<!-- #endif -->
	</view>
</template>

<script>
	import {
		mapState,
		mapActions,
		mapMutations
	} from "vuex"
	import filtion from '@/im/utils/filtion.js'
	import WCompress from '@/components/w-compress/w-compress.vue'
	export default {
		components: {
			WCompress
		},
		data() {
			return {
				options: {},
				timer: null,
				isLoad: false,
				isEnterRoom: false,
				isIos: uni.getDeviceInfo().system.includes('iOS'),
				i_css: '5px 10px 3px 10px',
				a_css: '6px 10px 4px 10px',
				videoContext: null,
				draft_info: {},
				scrollTop: 100,
				isScroll: true,
				animation: false,
				autofocus: false,
				param: {
					page: 1,
					user_type: 1
				},
				list: {
					data: []
				},
				loading: true,
				text: '',
				text_url: '',
				canSend: true,
				isSend: false,
				showOper: false,
				isHaveShow: false,
				currentPoint: {},
				showCancel: false,
				showCopy: false,
				showPress: false,
				is_host: 0,
				cur_ind: 0,
				lockTap: false,
				isUpload: false,
				videoSize: 50,
				filetype: 'picture',
				sourceType: ['camera', 'album'],
				isCompress: 1
			}
		},
		computed: mapState({
			configInfo: state => state.config.configInfo,
			imChatOptions: state => state.user.imChatOptions,
		}),
		async onLoad(options) {
			let {
				type = 1
			} = options
			options.type = type * 1
			this.options = options
			this.param.user_type = type
			this.updateUserItem({
				key: 'draftOper',
				val: false
			})
			if (this.timer) clearInterval(this.timer)
			this.initData()
		},
		async onShow() {
			if (!this.isLoad || this.isUpload) return
			let lockReconnect = this.$io.msg.lockReconnect
			console.log(lockReconnect, "====onshow lockReconnect")
			if (lockReconnect) return
			this.isScroll = true
			this.initData(1)
		},
		// #ifdef H5
		async destroyed() {
			// #endif 
			// #ifndef H5
			async onUnload() {
					// #endif 
					let {
						text,
						showOper,
						draft_info
					} = this
					if (text && !showOper) {
						let param = Object.assign({}, this.$util.pick(this.imChatOptions, ['user_type', 'room_key']), {
							text,
							text_type: 1
						})
						await this.$api.im.draftAdd(param)
						this.updateUserItem({
							key: 'draftOper',
							val: true
						})
					}
					if (!text && !showOper && draft_info && draft_info.id) {
						await this.$api.im.draftDel({
							id: draft_info.id
						})
						this.updateUserItem({
							key: 'draftOper',
							val: true
						})
					}
					await this.unSubscribe()
				},
				watch: {
					text(val) {
						if (val && val.length > 0) {
							val = val.replace(/(^\s*)|(\s*$)/g, "")
						}
						let isSend = val.length > 0
						this.isSend = isSend
						if (isSend) {
							this.showOper = false
						}
					}
				},
				methods: {
					...mapActions(['getConfigInfo']),
					...mapMutations(['updateUserItem']),
					async initData(isOnShow = 0) {
						this.$io.msg.lockReconnect = false
						let io_status = uni.getStorageSync('io_msg_status')
						let localSocket = this.$io.msg.localSocket
						let isReady = localSocket && localSocket.readyState == 1
						console.log(isReady, localSocket, "====isReady localSocket")
						if (io_status == 1 && isReady) {
							await this.unSubscribe()
						}
						if (localSocket == null || (io_status == 1 && isReady)) {
							uni.setStorageSync('io_msg_status', 2)
						}
						this.param.page = 1
						this.initIndex()
						if (!isOnShow) {
							// #ifdef H5
							this.$jweixin.hideOptionMenu()
							// #endif
							return
						}
						if (this.timer) {
							clearInterval(this.timer)
							return
						}
						this.timer = setInterval(() => {
							let localSocket = this.$io.msg.localSocket
							let isReady = localSocket && localSocket.readyState == 1
							if (isReady) {
								clearInterval(this.timer)
								return
							}
							this.param.page = 1
							this.initIndex()
						}, 2000)
					},
					async initIndex(refresh = false) {
						await this.canSendMsg()
						if (!this.configInfo.id) {
							await this.getConfigInfo()
						}
						this.$util.setNavigationBarColor({
							color: '#000000',
							bg: '#ffffff'
						})
						let param = this.$util.pick(this.imChatOptions, ['user_type', 'room_key'])
						let [data] = await Promise.all([this.$api.im.draftInfo(param), this.getList()])
						if (data && data.id) {
							this.text = data.text
						}
						this.draft_info = data
						this.isLoad = true
						let {
							receive_info = {}
						} = this.list
						uni.setNavigationBarTitle({
							title: receive_info && receive_info.user_name ? receive_info.user_name : '消息详情'
						})
					},
					initRefresh() {
						this.param.page = 1
						this.initIndex(true)
					},
					async getList(flag = false) {
						let {
							list: oldList,
							param,
						} = this
						let {
							room_key
						} = this.imChatOptions
						param.room_key = room_key
						let newList = await this.$api.im.textList(param)
						newList.data = newList.data.reverse()
						if (this.param.page == 1) {
							this.list = newList
							let len = newList.data.length
							this.pageScrollToBottom(1)
						} else {
							newList.data = newList.data.concat(oldList.data)
							this.list = newList
							this.scrollTop = 100
						}
						this.loading = false
						this.$util.hideAll()
					},
					async canSendMsg() {
						let {
							room_key
						} = this.imChatOptions
						let data = await this.$api.im.canSendMassage({
							room_key
						})
						this.canSend = data
						let io_status = uni.getStorageSync('io_msg_status')
						if (io_status * 1 != 1 && data) {
							this.$io.msg.lockReconnect = false
							this.$io.msg.connect(this.imChatOptions)
							this.subscribe()
						}
					},
					// 使页面滚动到底部
					pageScrollToBottom(isScroll = 0) {
						let that = this;
						setTimeout(function() {
							uni.createSelectorQuery().select('#container').boundingClientRect(function(rect) {
								that.scrollTop = rect.height
								if (isScroll) {
									setTimeout(() => {
										that.isScroll = false
										setTimeout(() => {
											that.animation = true
										}, 100)
									}, 200)
								}
							}).exec()
						}, 200)
					},
					handerUpper() {
						if (this.list.current_page >= this.list.last_page || this.loading) return;
						this.param.page = this.param.page + 1;
						this.loading = true;
						this.getList();
					},
					toShowOper() {
						this.lockTap = true
						this.isHaveShow = true
						this.showOper = !this.showOper
						if (this.showPress) {
							this.showPress = false
						}
						this.text = ''
						setTimeout(() => {
							this.lockTap = false
						}, 100)
					},
					focus() {
						if (this.showPress) {
							this.showPress = false
						}
						if (this.showOper) {
							this.showOper = false
						}
					},
					// 长按
					longpress(index = 0, key = 0) {
						this.showPress = false
						if (!this.lockTap && this.showOper) {
							this.isHaveShow = false
							this.showOper = false
						}
						if (!key) return
						const query = uni.createSelectorQuery();
						query.select(`.${key}`).boundingClientRect(data => {
							this.currentPoint = data
						}).exec();
						let cur_time = this.$util.DateToUnix(this.$util.formatTime(new Date(Math.ceil(new Date()
								.getTime())),
							'YY-M-D h:m:s'))
						let {
							create_time,
							user_id,
							user_type,
							text_type
						} = this.list.data[index]
						let {
							user_id: uid,
							user_type: utype
						} = this.imChatOptions
						let is_host = uid == user_id && utype == user_type
						this.showCancel = is_host && parseInt(cur_time - create_time) < 120
						this.showCopy = text_type == 1
						this.is_host = is_host
						this.cur_ind = index
						this.showPress = true
					},
					toCopy() {
						// #ifdef MP-WEIXIN
						let privacyCheck = this.$refs.user_privacy.check()
						if (privacyCheck) {
							this.$refs.user_privacy.open()
							return
						}
						// #endif
						let {
							text: url
						} = this.list.data[this.cur_ind]
						this.$util.goUrl({
							url,
							openType: 'copy'
						})
						this.showPress = false
					},
					previewImage(current, urls) {
						// #ifdef APP-PLUS 
						if (plus.os.name == 'Android' && plus.navigator.checkPermission(
								'android.permission.WRITE_EXTERNAL_STORAGE') === 'undetermined') {
							this.$refs.preview_image_item
								.previewImage({
									current,
									urls
								})
						} else {
							this.$util.previewImage({
								current,
								urls
							})
						}
						// #endif
						// #ifndef APP-PLUS
						this.$util.previewImage({
							current,
							urls
						})
						// #endif
					},
					play(index) {
						let {
							id,
							text
						} = this.list.data[index]
						this.videoContext = uni.createVideoContext(`video_${id}`)
						this.videoContext.requestFullScreen()
					},
					ended() {
						this.videoContext.exitFullScreen()
					},
					fullscreenchange(e) {
						if (!e.detail.fullScreen) {
							this.videoContext.stop()
							this.videoContext.pause()
						}
					},
					async toUpdateMsgStatus(index, status = 2) {
						if (status == 2) {
							this.toConfirmUpdateMsg(index, status)
							return
						}
						let [res_del, {
							confirm
						}] = await uni.showModal({
							content: `确认删除?`,
							confirmText: `删除`
						})
						if (!confirm) {
							this.showPress = false
							return
						}
						this.toConfirmUpdateMsg(index, status)
					},
					async toConfirmUpdateMsg(index, status) {
						this.lockTap = true
						this.showPress = false
						try {
							this.$util.showLoading({
								title: status == 2 ? `正在撤回` : `正在删除`
							})
							let {
								room_key
							} = this.imChatOptions
							let {
								id
							} = this.list.data[index]
							let methodModel = status == 2 ? 'cancelMyMassage' : 'delMyMassage'
							await this.$api.im[methodModel]({
								id,
								room_key
							})
							this.$util.hideAll()
							this.lockTap = false
							if (status == 2) {
								this.list.data[index].status = status
								this.toSendMessage(0, id)
							} else {
								this.list.data.splice(index, 1)
							}
						} catch (e) {
							this.lockTap = false
						}
					},
					async unSubscribe() {
						let readyState = this.$io.msg.localSocket.readyState
						if (readyState == 1) {
							this.$io.msg.clearConnect()
							this.$io.msg.unSubscribe("enterRoom")
							this.$io.msg.unSubscribe("mOnMessage")
							this.$io.msg.unSubscribe("cleanNoReadMassage")
							this.$io.msg.close()
						}
					},
					async subscribe() {
						let {
							user_id: uid,
							user_type: utype,
							room_key
						} = this.imChatOptions
						this.$io.msg.subscribe("enterRoom", (item) => {
							if (item.room_key !== room_key) return
							this.isEnterRoom = true
							this.list.data.map((aitem, aindex) => {
								if (aitem.is_host) {
									aitem.read = 1
								}
							})
						})
						this.$io.msg.subscribe("cleanNoReadMassage", (item) => {
							if (item.room_key !== room_key) return
							this.list.data.map((aitem, aindex) => {
								if (aitem.is_host) {
									aitem.read = 1
								}
							})
						})
						this.$io.msg.subscribe("mOnMessage", (item) => {
							if (item.room_key !== room_key) return
							let {
								status = 1
							} = item
							let length = this.list.data.length
							if (status == -1 || (status != 2 && length > 0 && item.id * 1 ===
									this.list.data[length - 1].id * 1)) return
							if (status == 2) {
								let index = this.list.data.findIndex(aitem => {
									return aitem.id == item.id
								})
								this.list.data[index].status = 2
							} else {
								let create_time_text = this.$util.formatTime(item.create_time * 1000,
									'h:m')
								let is_host = uid == item.user_id && utype == item.user_type ? 1 : 0
								let data = Object.assign({}, item, {
									status: 1,
									is_host,
									create_time_text
								})
								this.list.data.push(data)
								this.pageScrollToBottom()
							}
						})
					},
					// text_type 0撤回，1文字，2图片，3视频
					async toSendMessage(text_type = 1, id = 0) {
						if (text_type) {
							await this.canSendMsg()
						}
						if (!this.canSend) {
							this.$util.showToast({
								title: `订单已结束, 不能继续发消息`
							})
							this.unSubscribe()
							return
						}
						let {
							text,
							text_url
						} = this
						let param = Object.assign({}, this.imChatOptions, {
							text: text_type == 1 ? text : text_url,
							text_type
						})
						if (!text_type) {
							param.id = id
						}
						let ftext = text.replace(/\s+/g, '').replace(/(1[3-9]\d{1})(\d{4})(\d{4})/, "电话")
						if (text_type == 1 && filtion(ftext)) {
							this.$util.showToast({
								title: `输入内容不合法，请检查并修改后重试`
							})
							return
						}
						if (text_type && !param.text) return
						let localSocket = this.$io.msg.localSocket
						if (localSocket && localSocket.readyState == 0) {
							setTimeout(() => {
								this.toSendMessage(text_type, id)
							}, 600)
							return
						}
						let imSendResult = await this.$io.msg.sendMessage({
							action: 'mOnMessage',
							data: param
						})
						this.isUpload = false
						// console.log(imSendResult, "====imSendResult")
						if (imSendResult.errMsg === 'sendSocketMessage:ok') {
							this.$nextTick(() => {
								this.text = ''
								this.text_url = ''
								if (text_type && this.showOper) {
									this.showOper = false
								}
								let {
									draft_info
								} = this
								if (draft_info && draft_info.id) {
									this.$api.im.draftDel({
										id: draft_info.id
									})
									this.draft_info = {}
								}
							}, 1)
						} else {
							setTimeout(() => {
								this.toSendMessage(text_type, id)
							}, 600)
						}
					},
					async toCheckChooseImg(type) {
						this.filetype = type
						let {
							sourceType: param
						} = this
						// #ifdef APP-PLUS
						if (plus.os.name == 'Android') {
							this.$refs.app_upload_item.open()
						} else {
							this.chooseImage(param)
						}
						// #endif
						// #ifndef APP-PLUS
						this.chooseImage(param)
						// #endif
					},
					async chooseImage(sourceType) {
						// #ifdef MP-WEIXIN
						let privacyCheck = this.$refs.user_privacy.check()
						if (privacyCheck) {
							this.$refs.user_privacy.open()
							return
						}
						// #endif
						this.isUpload = true
						let {
							filetype,
							videoSize,
							isCompress
						} = this
						// #ifdef APP-PLUS
						isCompress = false
						// #endif
						let is_upload_img = filetype == 'picture'
						let chooseModel = is_upload_img ? 'chooseImage' : 'chooseVideo'
						let count = 1
						let param = {
							count,
							sourceType
						}
						if (is_upload_img) {
							param.sizeType = ['compressed']
						}
						let [res_upload, res_info] = await uni[chooseModel](param)
						if (res_upload) return
						let {
							size = 0,
								tempFiles,
								tempFilePath = ''
						} = res_info
						if (filetype == 'video' && size / 1024 / 1024 > videoSize) {
							this.$util.showToast({
								title: `上传视频大小超过限制${videoSize}M`
							})
							return
						}
						let filePath = [];
						// 格式化图片参数
						if (is_upload_img) {
							let arr = tempFiles.map(item => {
								return item.path
							})
							if (isCompress) {
								uni.showLoading({
									title: '图片压缩中...',
									mask: true
								})
								this.$refs.wCompress.start(arr, {
									pixels: 1000000, // 最大分辨率，默认二百万
									quality: 0.9
								}).then(res => {
									this.$util.hideAll()
									this.toCompressImg(res)
								}).catch(e => {
									this.$util.showToast({
										title: e.msg
									})
									this.$util.hideAll()
								})
							} else {
								this.toCompressImg(arr)
							}
						} else {
							this.$util.showLoading({
								title: "上传中"
							});
							let {
								attachment_path: path
							} = await this.$api.base.uploadFile({
								filePath: tempFilePath,
								formData: {
									type: this.filetype
								}
							})
							this.$util.hideAll()
							this.text_url = path
							this.toSendMessage(3)
						}
					},
					async toCompressImg(imgs) {
						this.$util.showLoading({
							title: "上传中"
						})
						for (let i = 0; i < imgs.length; i++) {
							let {
								attachment_path: path
							} = await this.$api.base.uploadFile({
								filePath: imgs[i],
								formData: {
									type: this.filetype
								}
							})
							this.$util.hideAll()
							this.text_url = path
							this.toSendMessage(2)
						}
					},
					toPrePage() {
						let pages = getCurrentPages()
						let len = pages.length
						let prePage = ''
						if (len > 1) {
							prePage = pages[pages.length - 2].route
						}
						let {
							type
						} = this.options
						if (prePage === 'im/pages/list') {
							this.$util.goUrl({
								url: 1,
								openType: `navigateBack`
							})
						} else {
							this.$util.goUrl({
								url: `/im/pages/list?type=${type}`,
								openType: `reLaunch`
							})
						}
					}
				}
		}
</script>


<style lang="scss">
	.chat-pages-detail {
		height: 100vh;
		display: flex;
		flex-direction: column;

		.top-box {
			height: 93rpx;
			padding: 0 30rpx;
			display: flex;
			align-items: center;
		}

		.center-box {
			flex: 1;
			overflow: hidden;
			z-index: 2;

			.message-box {
				margin-bottom: 70rpx;

				.list-item {

					.avatar-img {
						width: 80rpx;
						height: 80rpx;
					}

					.flex-1 {
						width: calc(100% - 80rpx - 20rpx);
						color: #979797;

						.username {
							margin-bottom: 14rpx;
						}

						.item-text {
							color: #060606;
							line-height: 40rpx;
							padding: 18rpx 30rpx;
							-webkit-touch-callout: none;
							-webkit-user-select: none;
						}

						.item-image {
							width: 278rpx;
							-webkit-touch-callout: none;
							-webkit-user-select: none;
						}

						.item-video {
							width: 278rpx;
							height: 278rpx;
							-webkit-touch-callout: none;
							-webkit-user-select: none;
						}

					}

				}

				.list-item.left {
					.item-text {
						border-radius: 0 16rpx 16rpx 16rpx;
					}
				}

				.list-item.right {
					.item-text {
						border-radius: 16rpx 0 16rpx 16rpx;
					}
				}

			}

		}



		.footer-box {
			width: 100%;
			z-index: 3;

			.order-tips {
				height: 82rpx;
				background: #F6F6F6;
			}

			.chat-info {
				background: #F6F6F6;
				padding: 30rpx 0 30rpx 30rpx;

				.textarea {
					min-height: 22px;
					max-height: 60px;
					overflow: auto;
					line-height: 20px;
					border-radius: 8rpx;
				}

				.iconfont {
					font-size: 40rpx;
				}

				.send-btn {
					width: 100rpx;
					height: 50rpx;
				}
			}


			.oper-info {
				padding: 44rpx 30rpx 200rpx 30rpx;

				.oper-item {

					.icons {
						width: 100rpx;
						height: 100rpx;
						background: #F7F7F7;
						border-radius: 8rpx;

						.iconfont {
							font-size: 40rpx;
						}
					}

					.f-icontext {
						color: #5A677E;
						margin-top: 15rpx;
					}
				}

				.oper-item:nth-child(1) {
					margin-right: 80rpx;
				}
			}

			.space-safe {
				background: #F6F6F6;
			}
		}


		.longpress-box {
			width: 100%;

			.longpress-list {
				background: #333;
				z-index: 201;
				transition: transform 600ms;

				.item-child {
					width: 120rpx;
					height: 60rpx;
				}
			}

			.longpress-list.customer.top::before {
				content: '';
				position: absolute;
				left: 71px;
				bottom: -10px;
				border: 6px solid transparent;
				border-top-color: #333;
				z-index: 200;
			}

			.longpress-list.customer.bottom::before {
				content: '';
				position: absolute;
				left: 71px;
				top: -10px;
				border: 6px solid transparent;
				border-bottom-color: #333;
				z-index: 200;
			}

			.longpress-list.mine.top::before {
				content: '';
				position: absolute;
				right: 71px;
				bottom: -10px;
				border: 6px solid transparent;
				border-top-color: #333;
				z-index: 200;
			}

			.longpress-list.mine.bottom::before {
				content: '';
				position: absolute;
				right: 71px;
				top: -10px;
				border: 6px solid transparent;
				border-bottom-color: #333;
				z-index: 200;
			}

		}
	}
</style>